<!-- 
在 Vue 3 中， `v-model`  是一个用于在父子组件之间进行双向数据绑定的指令。它简化了在表单元素和自定义组件之间的值传递。以下是关于 Vue 3 中  `v-model`  的说明总结：
  1. 基本用法
  在 Vue 3 中， `v-model`  可以直接用于表单元素（如  `<input>` 、 `<select>` 、 `<textarea>`  等）以及自定义组件。
   示例（表单元素）
  vue
  <template>
    <input v-model="message" />
    <p>输入的内容: {{ message }}</p>
  </template>

  <script>
  export default {
    data() {
      return {
        message: ''
      };
    }
  };
  </script>
  2. 在自定义组件中使用  `v-model` 
  在自定义组件中使用  `v-model`  时，需要通过  `modelValue`  属性接收父组件传递的值，并通过  `update:modelValue`  事件来更新值。
   示例（自定义组件）
  vue
  MyInput.vue
  <template>
    <input :value="modelValue" @input="updateValue" />
  </template>

  <script>
  export default {
    props: {
      modelValue: String
    },
    methods: {
      updateValue(event) {
        this.$emit('update:modelValue', event.target.value);
      }
    }
  };
  </script>
   父组件使用自定义组件
  vue
  <template>
    <MyInput v-model="inputValue" />
    <p>输入的内容: {{ inputValue }}</p>
  </template>

  <script>
  import MyInput from './MyInput.vue';

  export default {
    components: {
      MyInput
    },
    data() {
      return {
        inputValue: ''
      };
    }
  };
  </script>
  3. 自定义  `v-model`  的参数
  在 Vue 3 中， `v-model`  允许使用自定义参数。可以通过  `v-model:argument`  的方式来指定不同的属性和事件。
   示例
  vue
  MyInput.vue
  <template>
    <input :value="modelValue" @input="updateValue" />
  </template>

  <script>
  export default {
    props: {
      modelValue: String,
      // 自定义其他属性
      placeholder: String
    },
    methods: {
      updateValue(event) {
        this.$emit('update:modelValue', event.target.value);
      }
    }
  };
  </script>
   父组件使用自定义参数
  vue
  <template>
    <MyInput v-model:inputValue="inputValue" placeholder="请输入内容" />
  </template>

  <script>
  import MyInput from './MyInput.vue';

  export default {
    components: {
      MyInput
    },
    data() {
      return {
        inputValue: ''
      };
    }
  };
  </script>
  4. 多个  `v-model` 
  Vue 3 允许在同一个组件上使用多个  `v-model` ，每个  `v-model`  可以通过不同的参数来区分。
   示例
  vue
  MyComponent.vue
  <template>
    <input :value="modelValue1" @input="updateValue1" />
    <input :value="modelValue2" @input="updateValue2" />
  </template>

  <script>
  export default {
    props: {
      modelValue1: String,
      modelValue2: String
    },
    methods: {
      updateValue1(event) {
        this.$emit('update:modelValue1', event.target.value);
      },
      updateValue2(event) {
        this.$emit('update:modelValue2', event.target.value);
      }
    }
  };
  </script>
   父组件使用多个  `v-model`
  vue
  <template>
    <MyComponent v-model:modelValue1="value1" v-model:modelValue2="value2" />
  </template>

  <script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        value1: '',
        value2: ''
      };
    }
  };
  </script>

  总结
  在 Vue 3 中， `v-model`  提供了一种方便的方式来实现双向数据绑定。通过在自定义组件中使用  `modelValue`  属性和  `update:modelValue`  事件，可以轻松地在父子组件之间传递数据。同时，Vue 3 还支持多个  `v-model`  和自定义参数，使得组件的灵活性和可扩展性得到了进一步增强。理解和掌握  `v-model`  的用法，可以帮助开发者更好地管理组件的状态和交互。 
-->
<template>
  <div class="app">
    <!-- 1.input v-model -->
    <!-- <input v-model="message">
    <input :value="message" @input="message = $event.target.value"> -->

    <!-- 2.组件的v-model: 默认modelValue -->
    <counter v-model="appCounter"></counter>
    <counter :modelValue="appCounter" @update:modelValue="appCounter = $event"></counter>
    
    <!-- 3.组件的v-model: 自定义名称counter -->
    <counter2 v-model:counter="appCounter" 
              v-model:modelCountValue="modelCountValue"></counter2>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import Counter from './components/Counter.vue'
  import Counter2 from './components/Counter2.vue'

  const message = ref("Hello World")
  const appCounter = ref(100)
  const modelCountValue = ref("modelCountValue")

</script>

<style scoped>
</style>

